@require "./public/_reset";
@require "./public/_Layout";
@require "./public/_mixin";

#app{
    width 100%
    height 100%
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    a.logo{
        position: fixed
        top: 1%
        left: 50%
        display block
        width 74px
        height 18px
        margin-left: -(@width/2)
        background-image: url(../images/logo.png)
    }
    p.Copyright{
        display: block;
        width 100%
        height: auto;
        overflow: hidden;
        text-align: center;
        position: fixed
        bottom: 1%
        left: 0%
        font-size: 13px;
        color: #959595;
        @media screen and (max-width:1000px) {
            font-size: 1.3vw;
        }
    }
    .mid{
        width 95%
        height 92%
        background-color: #006ac6;
        display: flex;
        justify-content: center;
        align-items: center;
        >article{    
            >h1,>h2,>p{
                text-align: center;
                font-family: 'raleway', sans-serif;
                color: #fff;
            }
            >h1{
                font-size: 100px;
                margin-bottom: 0px;
                @media screen and (max-width:1000px) {
                    font-size: 10vw;
                }
            }
            >h2{
                font-size: 26px;
                margin-bottom: 30px;
                font-weight: normal;
                @media screen and (max-width:1000px) {
                    font-size: 2.6vw;
                }
            }
            >p{
                color: #4797FB;
                font-size: 15px;
                @media screen and (max-width:1000px) {
                    font-size: 1.5vw;
                }
            }
            >a.login_btn{
                display: block;
                width 150px
                height 35px
                border-radius: 5px;
                font-size: 15px;
                font-weight: normal;
                font-family: 'raleway', sans-serif;
                color: #fff;
                margin: 0 auto;
                text-align: center;
                line-height: 35px;
                border: 1px solid #fff;
                margin-bottom: 31px;
                background-color: #006ac6;
                transition: color .2s, background-color .2s;
                @media screen and (max-width:1000px) {
                    font-size: 1.5vw;
                }
                &:hover{
                    background-color: #fff;
                    color: #006ac6;
                }
            }
        }
    }
}